<template>
  <div class="capital-sale">
    <div class="capital-sale-top">
      <h3>筛选查询</h3>
      <div class="search-box">
        <div class="search-time">
          <span>订单时间：</span>
          <div class="block">
            <el-date-picker
              v-model="value"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              @change="selTime"
            />
          </div>
        </div>
        <div class="search-status">
          <span>订单状态：</span>
          <el-select
            v-model="value1"
            placeholder="请选择"
            clearable
            @change="selTime"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div
          class="search-btn"
          @click="searchBtn"
        >搜索</div>
      </div>
    </div>
    <div class="capital-sale-bot">
      <h3>数据列表</h3>
      <div class="capital-sale-bot-sel">
        <!-- <div
          class="exportBtn"
          @click="exportBtn"
        >导出数据</div> -->
        <div class="show-num">
          <el-select
            v-model="showNum"
            style="width:106px"
            placeholder="显示条数"
            @change="selSize"
          >
            <el-option
              v-for="item in showNumList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <!-- <div class="sort-type">
          <el-select v-model="sortType"
                     style="width:106px"
                     placeholder="排序方式">
            <el-option v-for="item in sortTypeList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value" />
          </el-select>
        </div> -->
      </div>
      <div class="capital-sale-bot-table">
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="order_code"
            label="订单号"
            align="center"
          />
          <el-table-column
            prop="pay_code"
            label="第三方支付单号"
            align="center"
          />
          <el-table-column
            prop="pay_type"
            label="支付方式"
            align="center"
          />
          <el-table-column
            prop="num"
            label="金币数量"
            align="center"
          />
          <el-table-column
            prop="total_price"
            label="订单金额"
            align="center"
          />
          <el-table-column
            prop="order_state"
            label="订单状态"
            align="center"
          />
          <el-table-column
            prop="order_time"
            label="下单时间"
            align="center"
          />
          <el-table-column
            prop="pay_time"
            label="支付时间"
            align="center"
          />
        </el-table>
      </div>
    </div>
    <div class="pagination-block">
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        :background="true"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next,total,slot, jumper"
        :total="totalNum"
        hide-on-single-page
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <div
          class="page-number"
          layout="slot"
        >
          <div class="jump-button">跳至</div>
        </div>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getSaleData, getselData } from '@/api/capital.js'
import { formatDateAndTime } from '@/utils/util.js'
import { ORDER_STATUS, PAY_TYPE } from '@/utils/enum.js'
export default {
  data() {
    return {
      value: '',
      options: [
        {
          value: '1',
          label: '未完成'
        },
        // {
        //   value: '2',
        //   label: '已支付待发货'
        // },
        // {
        //   value: '3',
        //   label: '已发货'
        // },
        // {
        //   value: '4',
        //   label: '待签收'
        // },
        {
          value: '5',
          label: '已完成'
        }
        // {
        //   value: '6',
        //   label: '支付异常'
        // },
        // {
        //   value: '7',
        //   label: '用户取消关闭订单'
        // },
        // {
        //   value: '8',
        //   label: '支付超时关闭订单'
        // },
        // {
        //   value: '9',
        //   label: '后台手动关闭订单'
        // }
      ],
      value1: '',
      showNumList: [
        {
          value: '4',
          label: '4条一页'
        },
        {
          value: '6',
          label: '6条一页'
        },
        {
          value: '10',
          label: '10条一页'
        }
      ],
      showNum: '',
      sortTypeList: [
        {
          value: '0',
          label: '从小到大'
        },
        {
          value: '1',
          label: '从大到小'
        }
      ],
      sortType: '',
      tableData: [],
      currentPage: 1,
      totalNum: 0,
      pageSize: 6
    }
  },
  created() {
    this.getlist(1, 6)
  },
  methods: {
    // 获取数据
    getlist(num, size) {
      getSaleData({
        pageNum: num,
        pageSize: size

      }).then(res => {
        console.log(res)
        for (let i = 0; i < res.data.list.length; i++) {
          res.data.list[i].order_state = ORDER_STATUS.getName(
            res.data.list[i].order_state
          )
          res.data.list[i].pay_type = PAY_TYPE.getName(
            res.data.list[i].pay_type
          )
          if (res.data.list[i].order_time) {
            res.data.list[i].order_time = formatDateAndTime(
              res.data.list[i].order_time
            )
          } else {
            res.data.list[i].order_time = '/'
          }
          if (res.data.list[i].pay_time) {
            res.data.list[i].pay_time = formatDateAndTime(
              res.data.list[i].pay_time
            )
          } else {
            res.data.list[i].pay_time = '/'
          }
        }
        this.tableData = res.data.list
        this.totalNum = res.data.total
      })
    },
    // 筛选数据
    getSelList(num, size) {
      if (!this.value) {
        this.value = []
      }
      getSaleData({
        pageNum: num,
        pageSize: size,
        // requestMsg: {
        orderState: this.value1,
        startTime: this.value[0],
        endTime: this.value[1]
        // }
      }).then(res => {
        // console.log(res);
        for (let i = 0; i < res.data.list.length; i++) {
          res.data.list[i].order_state = ORDER_STATUS.getName(
            res.data.list[i].order_state
          )
          res.data.list[i].pay_type = PAY_TYPE.getName(
            res.data.list[i].pay_type
          )
          res.data.list[i].order_time = formatDateAndTime(
            res.data.list[i].pay_time
          )
          res.data.list[i].pay_time = formatDateAndTime(
            res.data.list[i].pay_time
          )
        }
        this.tableData = res.data.list
        this.totalNum = res.data.total
      })
    },
    selStatus() { },
    // 搜索
    searchBtn() {
      // console.log(this.value1)
      this.getSelList(1, 6)
    },
    // 显示条数
    selSize() {
      console.log(this.showNum)
      this.getlist(1, this.showNum)
    },
    // 选择时间
    selTime() {
      console.log(this.value)
      if (!this.value1 && !this.value) {
        this.getlist(1, 6)
      }
    },
    // 导出
    exportBtn() {
      this.$confirm('确认是否需要导出数据？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '继续导出',
        cancelButtonText: '放弃导出'
      })
        .then(() => {
          require.ensure([], () => {
            // 路径看自己项目位置
            const {
              export_json_to_excel
            } = require('../../../../excel/Export2Excel')
            const tHeader = [
              '订单号',
              '第三方支付',
              '支付方式',
              '金币数量',
              '订单金额',
              '订单状态',
              '下单时间',
              '支付时间'
            ] // 上面设置Excel的表格第一行的标题
            const filterVal = [
              'order_code',
              'pay_code',
              'pay_type',
              'num',
              'total_price',
              'order_state',
              'order_time',
              'pay_time'
            ] // 上面的tableData里对象的属性
            const list = this.tableData // 把data里的tableData存到list
            const data = this.formatJson(filterVal, list)
            export_json_to_excel(tHeader, data, '列表excel')
          })
          this.$message({
            type: 'success',
            message: '导出成功,正在下载'
          })
        })
        .catch(action => {
          this.$message({
            type: 'error',
            message: '放弃导出'
          })
        })
    },
    handleSizeChange() { },
    handleCurrentChange() {
      console.log(this.currentPage)
      if (this.value || this.value1) {
        this.getSelList(this.currentPage, this.pageSize)
      } else {
        this.getlist(this.currentPage, this.pageSize)
      }
    }
  }
}
</script>
